<template>
  <u-tabbar
      :value="value"
      @change="change"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
  >

    <view class="custom-tab-bar">
      <view class="custom-tab-bar-item" v-for="(item, index) in currentTabbarList" :key="index"
            :class="{'custom-tab-bar-item--active': index === currentValue}" @click="click(item)">
        <view class="custom-tab-bar-item-icon-wrapper">
          <image class="custom-tab-bar-item-icon" :src="index === currentValue? item.selectedIcon : item.icon"></image>
          <view class="custom-tab-bar-item-unread" v-if="item.badge && item.badgeText">{{item.badgeText}}</view>
        </view>
        <view class="custom-tab-bar-item-text">{{ item.text }}</view>
      </view>
    </view>
  </u-tabbar>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: "tab-bar",
  data() {
    return {
      value: 0,
      tabBarList: [
        {
          text: "首页",
          icon: "/static/images/tabbar/home.png",
          selectedIcon: "/static/images/tabbar/home_.png",
          to: "/pages/home/index",
        },
        {
          text: "房管家",
          icon: "/static/images/tabbar/work.png",
          selectedIcon: "/static/images/tabbar/work_.png",
          to: "/pages/manager/index",
        },
        {
          text: "消息",
          icon: "/static/images/tabbar/message.png",
          selectedIcon: "/static/images/tabbar/message_.png",
          badge: true,
          badgeText: "0",
          to: "/pages/message/index",
        },
        {
          text: "我的",
          icon: "/static/images/tabbar/mine.png",
          selectedIcon: "/static/images/tabbar/mine_.png",
          to: "/pages/mine/index",
        }
      ]
    }
  },
  computed: {
    // 这里可以根据路由的变化动态设置tabBarList的值
    currentTabbarList() {
      return this.tabBarList
    },

    // 获取当前的value值
    currentValue() {
      let index = this.tabBarList.findIndex(item => item.to === this.currentPath)
      console.log('index:', index)
      return index
    },
    //当前路径
    currentPath: {
      get() {
        let pages = getCurrentPages()
        let currentPage = pages[pages.length - 1];
        return '/' + currentPage.route;
      },
      set(val) {
        console.log('设置当前页面的路径：', val);
      }
    },
    //
    ...mapGetters({
      unreadNumber: 'unreadNumber'
    }),
  },
  watch: {
    unreadNumber:{
      handler(newVal, oldVal){
        console.log('监听到未读消息数量变化：', newVal,this.unreadNumber)
          this.tabBarList[2].badgeText = newVal>99?'99+':newVal
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.$nextTick(() => {
        this.$store.dispatch('getUnreadNumber')
      })
    },
    change(value) {
      this.value = value
    },
    click(item) {
      this.$tab.switchTab(item.to)
    }
  }
}
</script>
<style scoped lang="scss">
.custom-tab-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
  //display: grid;
  //grid-template-columns: repeat(auto-fill,minmax(33.3%,1fr));
  width: 100vw;

  .custom-tab-bar-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex: 1;
    color: #959595;
    font-size: 22rpx;
    margin-top: 20rpx;

    .custom-tab-bar-item-icon {
      width: 50rpx;
      height: 50rpx;
    }

    .custom-tab-bar-item-icon-wrapper {
      position: relative;

      .custom-tab-bar-item-unread {
        position: absolute;
        top: 0;
        right: 0;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background-color: red;
        color: #fff;
        font-size: 22rpx;
        text-align: center;
        line-height: 36rpx;
        transform: translate(50%, 0%);
      }
    }

    &.custom-tab-bar-item--active {
      color: #000000;
    }
  }

}
</style>
